<!--
 * @Description: 右侧第二个
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-18 17:26:24
-->
<template>
  <div>
    <!-- 2.创建图表容器 -->
    <div ref="container" style="height:150px"></div>
  </div>
</template>

<script>
import { Area } from '@antv/g2plot';
import { get } from '@/utils/request'
// 1.引入momentjs commonjs 
let moment = require('moment');
export default {
  data() {
    return {
      tempData:[],
    };
  },
  computed: {},
  methods: {
    async getTempData() {
      let res = await get('/dashboard/pageQueryData', {
        page: 1,
        pageSize: 30,
        engineer_id: 2,
        device_id: 1
      });
      // [{insert_time,tempature},{},{},{}]
      res.data.list.forEach((item,index,arr) => {
        // (需要格式化的时间) (格式化时间的格式)
        item.insert_time = moment(item.insert_time).format('HH:mm');
        arr[0].pm10=15.4;
        // temp.push(arr[0],arr[19],arr[39],arr[59],arr[79],arr[99])
      });
      this.tempData = res.data.list;
      // this.loadCharts();
      // console.log(res,'获取响应');
      this.createPie();
    },
    createPie() {
      const data = [
  { country: '兰州', year: '2010', value: 302.4},
  { country: '兰州', year: '2012', value: 293.9},
  { country: '兰州', year: '2014', value: 355.6},
  { country: '兰州', year: '2016', value: 310},
  { country: '兰州', year: '2018', value: 361.4},
  { country: '兰州', year: '2020', value: 298.5},
  { country: '兰州', year: '2022', value: 305.7},
  { country: '天水', year: '2010', value: 302.5},
  { country: '天水', year: '2012', value: 317.4},
  { country: '天水', year: '2014', value: 287.6},
  { country: '天水', year: '2016', value: 310.2},
  { country: '天水', year: '2018', value: 309.5},
  { country: '天水', year: '2020', value: 307.1},
  { country: '天水', year: '2022', value: 298.5},
  { country: '庆阳', year: '2010', value: 310.8},
  { country: '庆阳', year: '2012', value: 302.4},
  { country: '庆阳', year: '2014', value: 316.9},
  { country: '庆阳', year: '2016', value: 307.7},
  { country: '庆阳', year: '2018', value: 287.4},
  { country: '庆阳', year: '2020', value: 306.7},
  { country: '庆阳', year: '2022', value: 289.5},
  { country: '白银', year: '2010', value: 296.5},
  { country: '白银', year: '2012', value: 298.8},
  { country: '白银', year: '2014', value: 293.7},
  { country: '白银', year: '2016', value: 302.2},
  { country: '白银', year: '2018', value: 306.7},
  { country: '白银', year: '2020', value: 309.6},
  { country: '白银', year: '2022', value: 300},
];

const pattern = ({ country }) => {
  if (country === '兰州') {
    return {
      type: 'line',
      cfg: {
        lineWidth: 10,
        strokeOpacity: 0.6,
      },
    };
  } else if (country === '天水') {
    return {
      type: 'dot',
      cfg: {
        size: 10,
        padding: 5,
        fill: '#fff',
        fillOpacity: 0.8,
      },
    };
  }
};

const area = new Area(this.$refs.container, {
  data,
  xField: 'year',
  yField: 'value',
  seriesField: 'country',
  color: ['#82d1de', '#cb302d', '#e3ca8c'],
  areaStyle: {
    fillOpacity: 0.7,
  },
  meta: {
    year: {
      nice: true,
      range: [0, 1],
    },
  },
  smooth: true,
  yAxis: {
    label: {
      formatter: (value) => {
        return value * 100;
      },
    },
  },
  pattern,
});
area.render();
    }
  },
  created() { },
  mounted() {
    // this.createPie()  
    this.getTempData()
  },
};
</script>
<style scoped></style>